<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2022-11-16 08:08:04
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-09-08 15:12:44
 * @FilePath: \consumption-data-screen\src\components\Common\Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-row class="main-flex">
        <el-col>
          <div class="row school-logo-flex">
            <div class="image-flex-box">
              <el-image :src="SchoolInfo.logo"></el-image>
            </div>
            {{ SchoolInfo.name }}
          </div>
        </el-col>
        <!-- 标题 -->
        <el-col>
          <div class="screen-name-box">
            <el-image :src="require('../../assets/img/biaoti.png')"></el-image>
          </div>
        </el-col>
        <el-col>
          <div class="times-right-box">
            <span>{{ dataTime }}&nbsp;{{ times }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  // props: {
  //   SchoolInfo: {
  //     type: Object,
  //     default: () => { }
  //   }
  // },
  data() {
    return {
      type: this.$route.query.type,
      times: '',
      TimeStamp: '',
      dataTime: '',
      fullscreen: false,
      SchoolInfo: {
        logo: '',
        name: ''
      }
    }
  },
  beforeDestroy() {
    // 取消监听事件
    window.removeEventListener('resize', this.onresize)
  },
  mounted() {
    // 监听事件
    window.addEventListener('resize', this.onresize)
    this.getTimes()
    // 获取当前日期
    setInterval(() => {
      this.TimeStamp++
      this.dataTime = this.getNowData(this.TimeStamp)
      this.times = this.getNowTime(this.TimeStamp)
    }, 1000)
  },
  methods: {
    async getTimes() {
      // let url = ''
      // if (window.location.pathname.indexOf('Consume') !== -1) {
      //   // 存在
      //   url = '/Consume/TimeStamp'
      // } else {
      //   url = '/TimeStamp'
      // }
      const { data: res } = await this.$http.post('/TimeStamp')
      if (res.code !== 1) return this.$message.error(res.msg)
      this.TimeStamp = JSON.parse(res.data.time)
      this.dataTime = this.getNowData(this.TimeStamp)
      this.times = this.getNowTime(this.TimeStamp)
    },
    getNowTime(timestamp) {
      var date = new Date(timestamp * 1000)// 时间戳若为10位时需*1000
      // var Y = date.getFullYear()
      // var M = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
      // var D = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
      var h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
      var m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
      // var s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
      // return `${h}:${m}:${s}`
      return `${h}:${m}`
    },
    getNowData(timestamp) {
      var date = new Date(timestamp * 1000)// 时间戳若为10位时需*1000
      // var date = new Date(timestamp); // 时间戳若为13位则不需要乘1000
      var Y = date.getFullYear()
      var M = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
      var D = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
      // var h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
      // var m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
      // var s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
      // 星期
      var week = date.getDay()
      return `${Y}年${M}月${D}日 ` + this.weeks(week)
    },
    weeks(s) {
      if (s === 0) {
        return '星期日'
      } else if (s === 1) {
        return '星期一'
      } else if (s === 2) {
        return '星期二'
      } else if (s === 3) {
        return '星期三'
      } else if (s === 4) {
        return '星期四'
      } else if (s === 5) {
        return '星期五'
      } else {
        return '星期六'
      }
    },
    // 监听是否全屏状态
    onresize(event) {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      var winFlag = window.innerHeight === window.screen.height
      // 利用window全屏标识来判断 -- IE无效
      var isFull = window.fullScreen || document.webkitIsFullScreen
      if (isFull === undefined) {
        this.fullscreen = winFlag
      } else {
        this.fullscreen = winFlag || isFull
      }
    },
    screen() {
      var element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    }
  }
}
</script>
<style lang="less" scoped>
.main-flex {
  height: 98px;
  position: relative;
  box-sizing: border-box;
  background: linear-gradient(90deg, #0831A8 0%, #0E5DFC 52%, #0831A8 100%);
  box-shadow: inset -1px 0px 10px 1px #0068FB;
  padding: 0 40px;
  display: flex;
  align-items: center;

  .left-arrow {
    width: 100%;
    height: 98px;
  }

  .school-logo-flex {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;

    .image-flex-box {
      width: 60px;
      height: 60px;
      margin-right: 20px;
      border-radius: 50%;
      background-color: #fff;

      .el-image {
        width: 60px;
        height: 60px;
      }
    }
  }

  .screen-name-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 899px;
    height: 128px;
    background: url('../../assets/img/titlebg2.png') no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 7px;

    .el-image {
      height: 104px;
    }
  }

  .times-right-box {
    text-align: right;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 24px;
    font-weight: bold;
    // span:last-of-type {
    //   display: inline-block;
    //   margin-left: 25px;
    //   font-size: 40px;
    //   font-weight: bold;
    //   margin-right: 25px;
    // }

    // .el-image {
    //   width: 33px;
    //   height: 33px;
    //   cursor: pointer;
    // }
  }
}
</style>
